<template>
  <el-select
    v-model="selectedArr"
    class="userSelect"
    multiple
    filterable
    :disabled="disabled"
    :loading="mulSelectLoading"
    :collapse-tags="collapseTags"
    placeholder="请选择"
    @change="changeSelect"
  >
    <el-checkbox v-model="checked" @change="selectAll">全选</el-checkbox>
    <el-option
      v-for="item in selectOptions"
      :key="item[definedValue]"
      :label="item[definedLabel]"
      :value="item[definedValue]"
    >
      <!-- 自定义选择显示值 -->
      <template v-if="selectLabelFieldName">
        <span style="float: left">{{ item[definedLabel] }}</span>
        <span style="margin-left: 30px; color: #8492a6; font-size: 13px">
          {{ item[selectLabelFieldName] ? item[selectLabelFieldName] : '' }}
        </span>
      </template>
    </el-option>
  </el-select>
</template>

<script>
/**
 * 调用示例
 * queryParam.mulSelecteds 选中的值, 类型 Array
 * options 初始绑定的值, 类型 Array
 * mulSelectLoading 是否显示加载中提示，远程加载时会用到, 类型 Boolean
 * idCard 第二列显示值的属性名, 类型 String

 <MultipleSelect
    :value="queryParam.mulSelecteds"
    :select-options="options"
    :mul-select-loading="mulSelectLoading"
    select-label-field-name="idCard"
    :update-multiple-select.sync="queryParam.mulSelecteds"
  />
*/
export default {
  name: 'MultipleSelect',
  props: {
    // 自定义下拉显示值字段名 默认不显示 例  select-label-field-name="idCard"
    selectLabelFieldName: {
      type: String,
      default: ''
    },
    // 绑定label值的自定义属性
    definedLabel: {
      type: String,
      default: 'label'
    },
    // 绑定value值的自定义属性
    definedValue: {
      type: String,
      default: 'value'
    },
    // 选项
    selectOptions: {
      type: Array,
      default() {
        return []
      }
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 已选中选项
    value: {
      type: Array,
      default() {
        return []
      }
    },
    // loading
    mulSelectLoading: {
      type: Boolean,
      default: false
    },
    // 多选时是否将选中值以数字形式展示 例: +6
    collapseTags: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checked: false,
      selectedArr: []
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.selectedArr = newVal
        if (this.selectedArr.length && this.selectedArr.length === this.selectOptions.length) {
          this.checked = true
        }
      },
      immediate: true
    }
  },
  methods: {
    selectAll() {
      this.selectedArr = []
      if (this.checked) {
        this.selectOptions.forEach((item) => {
          this.selectedArr.push(item[this.definedValue])
        })
      } else {
        this.selectedArr = []
      }
      this.$emit('update:updateMultipleSelect', this.selectedArr)
    },
    changeSelect(val) {
      if (val.length === this.selectOptions.length) {
        this.checked = true
      } else {
        this.checked = false
      }
      this.$emit('update:updateMultipleSelect', this.selectedArr)
    }
  }
}
</script>

<style scoped>
.el-checkbox {
  text-align: right;
  width: 98%;
}
.userSelect {
  width: 100%;
}
</style>
